/*
 * @Author: didididijiajiajia 11643763+didididijiajiajia@user.noreply.gitee.com
 * @Date: 2023-08-22 11:17:53
 * @LastEditors: didididijiajiajia 11643763+didididijiajiajia@user.noreply.gitee.com
 * @LastEditTime: 2023-09-02 16:45:44
 * @FilePath: \vue低代码101-111\low_code\src\utils\userMenuDrag.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { events } from "./event"
export function useMenuDragger(containerRef,data){
    let currentComponent=null
    const dragenter=(e)=>{e.dataTransfer.dropEffect='move'}
    const dragover=(e)=>{e.preventDefault()}
    const dragleave=(e)=>{e.dataTransfer.dropEffect='none'}
    const drop=(e)=>{
        let block=data.value.block;
        data.value={
            ...data.value,
            block:[
            ...block,
            {
                top:e.offsetY,
                left:e.offsetX,
                zIndex:1,
                key:currentComponent.key,
                alignCenter:true
            }
        ]}
        currentComponent=null
    }
             // 监听元素拖拽到内容区域的各种操作 进入 移出 经过 松手
    function dragStart(e,component) {
        containerRef.value.addEventListener('dragenter',dragenter),
        containerRef.value.addEventListener('dragover',dragover),
        containerRef.value.addEventListener('dragleave',dragleave),
        containerRef.value.addEventListener('drop',drop),
        currentComponent = component
        events.emit("start") //发布start
    }
    //清除拖拽事件
    function dragEnd(e){
        containerRef.value.removeEventListener('dragenter',dragenter),
        containerRef.value.removeEventListener('dragover',dragover),
        containerRef.value.removeEventListener('dragleave',dragleave),
        containerRef.value.removeEventListener('drop',drop)
        events.emit("end")
    }
    return {dragStart,dragEnd}
}